<template>
  <div class="login">
    <van-nav-bar left-text="返回" left-arrow @click-left="onClickLeft" />

    <div class="main">
        <van-image height="200px" width="200px" src="https://huangshen.oss-cn-beijing.aliyuncs.com/yao-shop/6eb3082d7d141c701914246645773cc.png"></van-image>
      <van-form @submit="onSubmit">
        <van-field
          v-model="state.username"
          name="username"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="state.password"
          type="password"
          name="password"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px; padding:20px" >
          <van-button round block type="primary" native-type="submit" style="margin-bottom:20px;">
            登录
          </van-button>
          <van-button round block>忘记密码</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { reactive } from "vue";
import { Toast } from "vant";
import { useRouter } from "vue-router";

import {login} from "../api/user"

export default {
  name: "Login",
  setup() {


    //实例化路由
    const router = useRouter();
    const onClickLeft = () => {
      router.go(-1);
    };

    const state = reactive({
      username: "",
      password: "",
    });
    const onSubmit = (values) => {
       
      

      login(values).then(res=>{
            if(res.data.code===2000){
              localStorage.setItem("userInfo",JSON.stringify(res.data.data))
router.go(-1)
            }else{
              Toast.fail('账号或密码错误');
            }
      })
      

     
    };


    return {
      onClickLeft,
      onSubmit,
      state,
    };
  },
};
</script>

<style>
</style>